<template>
  <div class="commoditySales" style="color:#fff;height:100%;width: 100%;" ref="commoditySales"></div>
</template>

<script>
  export default {
    name: 'commoditySales',
    components: {

    },
    props: {
      impProductData: {
        type: Array,
        default () {
          return false
        }
      },
      className: {
        type: String,
        default () {
          return false
        }
      },
      sy: {
        type: String,
        default () {
          return false
        }
      }
    },
    data() {
      return {
        echartimpProduct: '',
        echartTitle: '',
        color:''
      }
    },
    watch: {
      impProductData: function(newVal, oldVal) {
        this.echartimpProduct = newVal; //newVal即是chartData
      },
      sy: function(newVal, oldVal) {
        this.sy = newVal; //newVal即是chartData
      },
      className: function(newVal, oldVal) {
        this.echartTitle = newVal; //newVal即是chartData
        this.getEchartData()
      }

    },

    mounted() {
      this.getEchartData()
    },
    methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getEchartData() {
        var that = this;
        var newColor;
        var titleColor;
        const commoditySales = this.$refs.commoditySales;
        if (commoditySales) {
          const myChart = this.$echarts.init(commoditySales)

          var parentData = this.echartimpProduct;
          if(that.sy == '1'){
            newColor = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#f9dc85'
              }, {
                offset: 1,
                color: '#eab618'
              }]);
              titleColor = '#fdd000';
          }else{
             newColor = new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#f2c38b'
              }, {
                offset: 1,
                color: '#dd8720'
              }]);
              titleColor = '#f2c38b';
          }
          const option = {

            title : {
              x: 'center',
              y:'10px',
              show:true,
              text: this.echartTitle,  //动态修改
              textStyle:{
                  color:titleColor,
                  fontWeight:'500',
                  fontSize:that.commonFunction.fontSize(0.14)
              }
           },
            grid: {
              left: '15%', // 与容器左侧的距离
              right: '13%',
              top: '20%',
              bottom: '20%' // 与容器右侧的距离

            },
            xAxis: {
               name: '热销商品',
               nameLocation:'end',
               nameTextStyle:{
                color:'#fff',
                fontSize:that.commonFunction.fontSize(0.09),
                width:that.commonFunction.fontSize(0.12),
                lineHeight:that.commonFunction.fontSize(0.14),
               },

              type: 'category',
              data: parentData[0],
              axisLabel: {
                axisTick: {
                  show: false
                },
                axisLine: {
                  formatter: function(value) {
                    let valueTxt = '';
                    if (value.length > 3) {
                      valueTxt = value.substring(0, 4) + '...';
                    } else {
                      valueTxt = value;
                    }
                    return valueTxt;
                  },
                  lineStyle: {
                    color: '#315070' //更改坐标轴颜色
                  },
                  show: true
                },
                interval: '0',
                rotate: '20',
                textStyle: {
                  color: '#fff',
                  fontSize: that.commonFunction.fontSize(0.1),
                  fontWeight:100
                },
                boundaryGap: true
              },
              axisLine: {
                lineStyle: {
                  color: '#315070' //更改坐标轴颜色
                }
              }

            },
            yAxis: {
              name: '单位：包',
              nameLocation: 'end',
              nameTextStyle: {
                color: '#fff',
                lineHeight: that.commonFunction.fontSize(0.2),
                fontSize:that.commonFunction.fontSize(0.12)
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: '#dbdbdb'
                }
              },
              axisLine: {
                          lineStyle: {
                            color: '#315070' //更改坐标轴颜色
                          }
                        },
              splitLine: {
                show: false
              },

            },
            series: [{
              data: parentData[1],
              type: 'bar',
              color:'#eab618',
              color: newColor,
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: 'top', //在上方显示
                    textStyle: { //数值样式
                      color: titleColor,
                      fontSize: that.commonFunction.fontSize(0.12)
                    },
                    formatter: function(params) {

                      if (params.value) {
                        return that.formatNumberRgx(params.value)
                      } else {
                        return '';
                      }
                    },
                  }
                }
              },
              barWidth: '60%'

            }]
          };

          myChart.setOption(option, true)

          window.addEventListener("resize", function() {
            myChart.resize()
          })
        }
      },
      // this.$on('hook:destroyed', () => {
      // 	window.removeEventListener("resize", function() {
      // 		myChart.resize();
      // 	});
      // })

    }
  }
</script>

<style>
  .commoditySales {
    width: 100%;
    height: 100%;
  }
</style>
